<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Use Bootstrap JavaScript Components</title>
    <link meta="description" content="How to use Bootstrap guide that explains aspects of using Javascript and jQuery Bootstrap components">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ionicons/3.0.0/css/ionicons.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <meta property="og:image" name="twitter:image" content="http://themes.guide/favicon-1024.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@ThemesGuide">
    <meta name="twitter:creator" content="@ThemesGuide">
    <meta name="twitter:title" content="How to Use Bootstrap Components">
    <meta name="twitter:description" content="How to use Bootstrap guide that explains aspects of using Javascript and jQuery Bootstrap components">
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-103606808-1', 'auto');
      ga('send', 'pageview');
    </script>
    <script src="https://www.codeply.com/js/embed.js"></script>
  </head>
  <body id="page-top" data-spy="scroll" data-target=".fixed-top" data-offset="60">
    <% include ./partials/nav %> 
    <div class="container pt-5">
        <div class="row mt-5">
            <div class="col-md-12">
                <% include ./partials/htb %>
            </div>
            <div class="col-md-12 pt-5 text-center">
                <h1 class="font-weight-light">How to Use Bootstrap JavaScript Components</h1>
            </div>
        </div>
    </div>
    
    <section id="howto">
        <div class="container">
            <div class="row mb-3">
                <div class="col-sm-10 mx-auto">

                    <p class="lead">
                    The Bootstrap documentation, has a very large “<a targe="_new" href="https://getbootstrap.com/docs/4.1/components/">Components</a>” section that includes most of the stylized CSS 
                    Components that I explained before. However, there’s overlap between the Bootstrap CSS and JavaScript Components. CSS is used to style Components, while <b>JavaScript is used 
                    to make Components functional.</b></p>

                    <p class="lead">
                    Some Bootstrap Components only provide CSS-driven formatting and style so they don’t utilize JavaScript. These CSS-only Components were explored earlier in the 
                    <a href="how-to-use-bootstrap-css.html">Bootstrap CSS</a> section: Badges, Breadcrumbs, Buttons, Cards, Form inputs, Jumbotron, Pagination.</p>
                    
                    <p class="lead">
                    But, most Components have <b>JavaScript-driven behaviors</b>:</p>
                    
                    <ul>
                    <li><a target="_new" href="http://getbootstrap.com/docs/4.1/components/modal/">Modals</a></li>
                    <li><a target="_new" href="http://getbootstrap.com/docs/4.1/components/alert/">Alerts (no configuration options)</a></li>
                    <li><a target="_new" href="http://getbootstrap.com/docs/4.1/components/carousel/">Carousel</a></li>
                    <li><a target="_new" href="http://getbootstrap.com/docs/4.1/components/collapse/">Collapse</a></li>
                    <li><a target="_new" href="http://getbootstrap.com/docs/4.1/components/dropdown/">Dropdowns</a></li>
                    <li><a target="_new" href="http://getbootstrap.com/docs/4.1/components/navbar/">Navbar</a></li>
                    <li><a target="_new" href="http://getbootstrap.com/docs/4.1/components/popover/">Popovers</a></li>
                    <li><a target="_new" href="http://getbootstrap.com/docs/4.1/components/scrollspy/">Scrollspy</a></li>
                    <li><a target="_new" href="http://getbootstrap.com/docs/4.1/components/tooltip/">Tooltips</a></li>
                    </ul>


                    <p class="lead">
                    You might also know that Bootstrap requires jQuery. This is because all of the Bootstrap JavaScript Components are 
                    implemented as jQuery Plugins. There are 2 ways to set options for (configure) any of the Bootstrap JavaScript Components.</p>
                    
                    <h4>Data Attributes</h4>
                    
                    <p class="lead">
                    The preferred method is using <a target="_new" href="https://getbootstrap.com/docs/4.1/getting-started/javascript/#data-attributes">Data Attributes</a>. This method doesn’t require you to add additional JavaScript/jQuery code since the data- attribute can be used directly in the HTML markup. For example,</p>

                    <pre class="bg-dark text-white rounded mb-5">
        &lt;div id="myModal" class="modal" data-backdrop="false"&gt;
            &lt;div class="modal-dialog"&gt;...&lt;/div&gt;
        &lt;/div&gt;</pre>

                    <h4>jQuery</h4>
                    
                    <p class="lead">
                    The other way to use Bootstrap’s JavaScript Components is jQuery. Use the appropriate jQuery selector the element, and an Object containing the 
                    appropriate Options for the Component. The Options for each Component are described in the Bootstrap docs.</p>
                    
                    <pre class="bg-dark text-white rounded mb-5">
        $("#myModal").modal({backdrop:false})</pre>
                    
                    <p class="lead">
                    As you can see the Component Options align with the data-attributes. Most Components are automatically initialized by simply using the appropriate Bootstrap 
                    data-toggle=”…” attribute and classes. Two exceptions are the Popover and Tooltip which must be manually initialized with jQuery. For example:</p>
                    
                    <pre class="bg-dark text-white rounded mb-5">
        $(function () {
          $('[data-toggle="popover"]').popover()
          $('[data-toggle="tooltip"]').tooltip()
        })</pre>
                    
                    <p class="lead">
                    JavaScript Component Usage is clearly described in the Documentation which is the best reference and constantly maintained. 
                    Don’t rely on 3rd party tutorials and sites like W3Schools are they tend to get outdated quickly, and you’ll end-up wondering “Why is my Bootstrap not working?”.</p>
                    
                </div>
                <div class="col-sm-10 mx-auto mt-5 py-4 border-top">
                    <div class="row">
                        <div class="col-sm mr-auto">
                            <a href="how-to-responsive-design-with-bootstrap.html">Prev: How to Responsive Design with Bootstrap</a>
                        </div>
                        <div class="col-sm-auto text-right">
                            <a href="how-to-customize-bootstrap.html">Next: How to Customize Bootstrap</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <div id="modalContact" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header d-block">
                    <h3 class="text-center">How can we help you?</h3>
                </div>
                <div class="modal-body">
                    <form id="contactForm" role="form" method="post">
                        <div class="form-group">
                            <label for="inputEmail" class="col-md-2 form-control-label">Email</label>
                            <div class="col-md-12">
                                <input type="email" class="form-control" id="inputEmail" name="contactEmail" required="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputMessage" class="col-md-2 form-control-label">Message</label>
                            <div class="col-md-12">
                                <textarea class="form-control" id="inputMessage" rows="6" name="contactMessage"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xl-12">
                                <button type="submit" id="contactBtn" class="btn btn-primary btn-lg mx-auto">Send it</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="modalThanks" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header d-block text-center">
                    <h3>Thank you!</h3>
                    <h6>We'll be in touch</h6>
                </div>
            </div>
        </div>
    </div>
    <% include ./partials/footer %>
    <!--scripts loaded here-->
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

  </body>
</html>